<template>
  <div class="login">
    <!-- <h1>这是登录页</h1> -->
    <!-- 账户样式 -->
    <div class="user_val">
      <span>账户</span>
      <input type="text" v-model="userVal" />
    </div>
    <!-- 密码框样式 -->
    <div class="pass_val">
      <span>密码</span>
      <input type="password" v-model="passVal" />
    </div>
    <!-- 设置登录按钮 -->
    <van-button color="#4366FE" @click="loginOn">立即登录</van-button>
  </div>
</template>

<script>
import { GetLoginData } from "@/request/api";
export default {
  data() {
    return {
      userVal: "15134542829",
      passVal: "123456",
    };
  },
  methods: {
    // 点击按钮进行登录
    loginOn() {
      GetLoginData({
        username: this.userVal,
        password: this.passVal,
      }).then((res) => {
        console.log(res.data);
        //   将拿到的token值保存在浏览器本地
        localStorage.setItem("token", res.data);
        // 登录成功时一秒后跳转到首页
        if (res.errCode == 0) {
          this.$toast("登录成功");
          setTimeout(() => {
            this.$router.push("/home");
          }, 1000);
        }
      });
    },
  },
  // created() {

  // },
};
</script>
 
<style lang = "less" scoped>
/* 背景图片的设置 */
.login {
  min-height: 100%;
  width: 100%;
  background: url("../assets/login.jpg");
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
}
/* 账户输入框的设置 */
.user_val {
  width: 50%;
  padding: 0.1rem 0.2rem;
  background-color: #ffcc33;
  border-radius: 0.2rem;
  position: fixed;
  top: 60%;
  left: 20%;
  font-size: 0.16rem;
  border: 0.02rem solid #333;
  span {
    margin-right: 0.05rem;
  }
  input {
    width: 70%;
    border: 0;
    background-color: #ffcc33;
  }
}
/* 密码输入框设置 */
.pass_val {
  width: 50%;
  padding: 0.1rem 0.2rem;
  background-color: #ffcc33;
  border-radius: 0.2rem;
  position: fixed;
  top: 70%;
  left: 20%;
  font-size: 0.16rem;
  border: 0.02rem solid #333;
  span {
    margin-right: 0.05rem;
  }
  input {
    width: 70%;
    border: 0;
    background-color: #ffcc33;
  }
}
/* 登录按钮样式 */
.van-button {
  position: fixed;
  top: 85%;
  left: 35%;
  padding: 0 0.3rem;
  border-radius: 20px;
  font-size: 16px;
  border: 0.02rem solid #333;
}
</style>